<template>
    <div class="form">
        <div class="header">
            <img src="@/assets/error.png" />
            <p>
                我承诺举报内容真实有效，
                <br />且愿意承担由此产生的法律责任
            </p>
        </div>
        <div class="padding24">
            <p class="hedd-text">举报原因</p>
            <div class="textarea">
                <van-field
                    v-model="message"
                    rows="6"
                    autosize
                    type="textarea"
                    maxlength="1000"
                    placeholder="请输入举报内容"
                    show-word-limit
                />
            </div>
        </div>
        <footer class="footer">
            <van-button
                type="primary"
                round
                color="linear-gradient(to right, #ff3c3c, #ff5e10)"
                size="large"
                @click="submit"
            >提交</van-button>
        </footer>
    </div>
</template>

<script>
import { Field, Toast, Button } from "vant";
import { setComplaint } from "@/api/api";
export default {
    components: {
        [Field.name]: Field,
        [Button.name]: Button
    },
    data() {
        return {
            message: ""
        };
    },
    methods: {
        submit(){
            if(this.message==""){
                Toast("请输入举报内容");
                return
            }
            setComplaint({
                prepare_id:this.$route.query.id,
                complaint_type:'',
                complaint_desc:this.message
            }).then(res=>{
                Toast("举报成功");
                this.$router.go(-1)
            })
        }
    }
};
</script>

<style scoped>
.form{
    padding-bottom: 70px;
}
.header {
    display: flex;
    align-items: center;
    background: rgba(255, 60, 60, 0.04);
    border-radius: 16px;
    margin: 24px;
    padding: 16px;
}
.header img {
    width: 32px;
    height: 32px;
}
.header p {
    flex: 1;
    font-size: 12px;
    font-weight: 400;
    color: #ff3c3c;
    line-height: 17px;
    padding: 0;
    padding-left: 16px;
}
.padding24{
    padding: 0 24px;
}
</style>